<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自由落体</title>
	</head>
	<body>
	<canvas id="myCanvas" width="1200" height="600"></canvas>
			<script type="text/javascript">
				var canvas=document.getElementById("myCanvas");
				var ctx =canvas.getContext("2d");
				ctx.fillStyle="greenyellow";
				ctx.fillRect(0,0,1400,750);
				/*var arcX=50;
				var arcY=50;
				var arc_vy=2;
				var arc_vx=15;*/
				var arcArr=[
				    [20,200,30,5,0,"#FFC0CB"],
				    [20,200,30,15,0,"#FF00CB"],
				    [20,200,30,10,5,"#FFC000"]
				]
				setInterval(function(){
					arcArr.push([20,100,10,6,19,"pink"]);
					arcArr.push([20,100,30,6,5,"blue"]);
					arcArr.push([20,100,15,3,1,"#black"]);
					arcArr.push([20,100,25,7,3,"red"]);
					arcArr.push([20,100,20,6,10,"grey"]);
			   },1000)
					
				setInterval(function(){
				
					ctx.fillStyle="rgba(255,255,0,0.7)";
					ctx.fillRect(0,0,1200,600);
					for(var i=0; i<arcArr.length;i++){
					ctx.beginPath();
					ctx.fillStyle=arcArr[i][5];
					//
					ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
					ctx.fill();
					
					arcArr[i][1]=arcArr[i][1]+arcArr[i][4];
					arcArr[i][0]=arcArr[i][0]+arcArr[i][3];	
					arcArr[i][4]=arcArr[i][4]+0.5;
					if(arcArr[i][1]>600-arcArr[i][2]){
						arcArr[i][4]=-arcArr[i][4];
						arcArr[i][4]=arcArr[i][4]*0.7;
						arcArr[i][1]=600-arcArr[i][2];
					}
					if(arcArr[i][0]>1200-arcArr[i][2]){
						
						arcArr[i][3]=-arcArr[i][3];						
						arcArr[i][0]=1200-arcArr[i][2];
					}
					if(arcArr[i][0]<arcArr[i][2]){
						
						arcArr[i][3]=-arcArr[i][3];						
						arcArr[i][0]=arcArr[i][2];
					}
				}
				},20);
			
		</script>
		
	</body>
</html>

